<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        main{
            width: 850px;
            height: 70px;
            border: 2px solid aquamarine;
            padding: 20px;
            margin: 20px auto;
        }
        /* h1{
            float: left;
            margin: 10px 120px;
            color:tomato;
        } */
        ul li{
            float: left;
            margin: 10px 10px 30px;
            width: 150px;
            line-height: 50px;
            text-align: center;
            float: left;
            cursor: pointer;
            font-size: 20px;
        }
        .current{
            color: white;
            background: tomato;
        }
        div{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        section{
            width: 850px;
            height: 500px;
            margin: 30px auto;
            padding: 20px;
            border: 2px solid aqua;
        }
        a{
            line-height: 30px;
            color: black;
        }
        div{
            display: none;
        }
        .xian{
            display: block;
        }
    </style>
</head>
<body>
        <!-- <h1>今日头条</h1> -->
        <main>
            <ul>
                <li class="current">热点</li>
                <li>财经</li>
                <li>科技</li>
                <li>娱乐</li>
                <li>体育</li>
            </main>
            </ul>
        <section>
            <div class="xian">
                <a href="https://www.toutiao.com/a6970868805270667812/?log_from=404e03a2a1204_1623075383228">“鸿蒙不再属于华为、归工信部所有”的消息疯传.开放原子开源基金会辟谣;人人视频下架整改;店铺刷好评最高被罚50万</a>
                <a href="https://www.toutiao.com/a6970868805270667812/?log_from=404e03a2a1204_1623075383228">“鸿蒙不再属于华为、归工信部所有”的消息疯传.开放原子开源基金会辟谣;人人视频下架整改;店铺刷好评最高被罚50万</a>
                <a href="https://www.toutiao.com/a6970868805270667812/?log_from=404e03a2a1204_1623075383228">“鸿蒙不再属于华为、归工信部所有”的消息疯传.开放原子开源基金会辟谣;人人视频下架整改;店铺刷好评最高被罚50万</a>
            </div>

            <div>
                <a href="https://www.toutiao.com/a6970868805270667812/?log_from=404e03a2a1204_1623075383228">“鸿蒙不再属于华为、归工信部所有”的消息疯传.开放原子开源基金会辟谣;人人视频下架整改;店铺刷好评最高被罚50万</a>
                <a href="https://www.toutiao.com/a6970868805270667812/?log_from=404e03a2a1204_1623075383228">“鸿蒙不再属于华为、归工信部所有”的消息疯传.开放原子开源基金会辟谣;人人视频下架整改;店铺刷好评最高被罚50万</a>
            </div>

            <div>
                <a href="https://t.m.youth.cn/transfer/toutiao/url/3g.youth.cn/rmtj/202106/t20210608_13004809.htm?tt_group_id=6971231754879238664">“澳媒：澳大利亚几乎没人知道跟中国的战争有多可怕</a><br>
                <a href="https://t.m.youth.cn/transfer/toutiao/url/3g.youth.cn/rmtj/202106/t20210608_13004809.htm?tt_group_id=6971231754879238664">“澳媒：澳大利亚几乎没人知道跟中国的战争有多可怕</a><br>
                <a href="https://t.m.youth.cn/transfer/toutiao/url/3g.youth.cn/rmtj/202106/t20210608_13004809.htm?tt_group_id=6971231754879238664">“澳媒：澳大利亚几乎没人知道跟中国的战争有多可怕</a>
            </div>

            <div>
                <a href="https://t.m.youth.cn/transfer/toutiao/url/3g.youth.cn/rmtj/202106/t20210608_13004809.htm?tt_group_id=6971231754879238664">“澳媒：澳大利亚几乎没人知道跟中国的战争有多可怕</a><br>
                <a href="https://t.m.youth.cn/transfer/toutiao/url/3g.youth.cn/rmtj/202106/t20210608_13004809.htm?tt_group_id=6971231754879238664">“澳媒：澳大利亚几乎没人知道跟中国的战争有多可怕</a>
                
            </div>

            <div>
                <a href="https://t.m.youth.cn/transfer/toutiao/url/3g.youth.cn/rmtj/202106/t20210608_13004809.htm?tt_group_id=6971231754879238664">“澳媒：澳大利亚几乎没人知道跟中国的战争有多可怕</a>
            </div>
        </section>
        

        <script>
            var list = document.getElementsByTagName('li');
            var div = document.getElementsByTagName('div');
            for(var i=0;i<list.length;i++){
                list[i].index=i;
                list[i].onclick=function(){
                    for(var j=0;j<list.length;j++){
                        list[j].className='';
                        div[j].className='';
                    }
                    this.className='current';
                    var num=this.index;
                    div[num].className='xian'
                }
            }
            
        </script>
</body>
</html>